<template>
    <main class="c-arrange">
        <div class="title">
            {{RateTitle}}
        </div>
        <div class="list">
            <div class="item" v-for="(item,index) in arrangeData" :key="index">
                <div class="name">{{ item['disease_name'] }}</div>
                <div class="value">
                    <div class="bar" :style="{width:`${item.proportion}%`}">
                        <div class="text">{{ item.proportion }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>

<script lang="js">
    export default {
        props: {
            arrangeData: {
                type: Array,
            },
            RateTitle:{
                type: String,
                default: () => ''
            }
        },
        created() {

        }
    }
</script>

<style scoped lang="stylus">
    .c-arrange {
        flex-grow 1

        .title {
            text-align center
            font-weight bold
            font-size: 12px;
            color: #484D78;
            line-height: 12px;
        }

        .list {
            .item {
                margin-top 15px
                display flex
                align-items center

                .name, .value {
                    flex-grow 1
                    flex-shrink 0
                    flex-basis 0
                }

                .name {
                    min-width 200px
                    font-size: 12px;
                    color: #484D78;
                    text-align: right;
                    line-height: 12px;
                }

                .value {
                    padding-left 5px
                    display flex
                    align-items center
                    padding-right 40px

                    .bar {
                        height 12px
                        background: #5467E6;
                        border-radius: 4px;
                        width 7.24%
                        flex-shrink 0
                        position relative

                        .text {
                            position absolute
                            right -50px
                            font-size: 12px;
                            color: #484D78;
                            line-height: 12px;
                        }
                    }
                }
            }
        }
    }
</style>
